<template>
  <view class="movie-content">
    <view class="flex flex-m mb20">
      <zm-image
        custom-style="width:104rpx;height:140rpx;margin-right:20rpx"
        :src="obj.cover"
      ></zm-image>
      <view class="flex flex-col flex-c">
        <view class="movie-name mb20">{{ obj.filmName }}</view>
        <view class="lang fs24">{{ obj.copyType }}</view>
      </view>
    </view>
    <view class="flex movie-item mb20">
      <view class="movie-item_label fs24">影厅</view>
      <view class="movie-item_content fs24">{{ obj.hallName }}</view>
    </view>
    <view class="flex movie-item mb20">
      <view class="movie-item_label fs24">场次</view>
      <view class="movie-item_content fs24">{{ time }}</view>
    </view>
    <view class="flex movie-item mb20">
      <view class="movie-item_label fs24">座位</view>
      <view class="movie-item_content fs24">{{ obj.seatDescribe }}</view>
    </view>
    <view class="flex movie-item mb20">
      <view class="movie-item_label fs24">观影须知</view>
      <view class="movie-item_content fs24 rule">
        <view v-for="(item, index) in obj.refundExplain" :key="index">{{
          item
        }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  import ZmImage from '@/commons/ZmImage'
  export default {
    props: {
      customClass: {
        type: String
      },
      obj: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    components: {
      ZmImage
    },
    data() {
      return {}
    },
    methods: {
      handleClick() {
        this.$emit('click')
      }
    },
    computed: {
      time() {
        console.log(this.obj.sDate, this.obj.sTime, this.obj.eTime)
        if (this.obj.sDate && this.obj.sTime && this.obj.eTime) {
          const str = this.obj.sDate + ' ' + this.obj.sTime
          const str2 =
            this.$utils.getDateWeek(str) + this.obj.sTime + '~' + this.obj.eTime
          return str2
        } else {
          return ''
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .movie-content {
    padding: 30rpx;
    background: #fff;
    .movie-name {
      font-size: 34rpx;
      font-weight: bold;
    }
    .movie-item {
      align-items: flex-start;
      &_label {
        color: #888;
        width: 104rpx;
        margin-right: 20rpx;
        text-align: right;
        line-height: 44rpx;
      }
      &_content {
        color: #333;
        flex: 1;
        line-height: 44rpx;
        // line-height: 44rpx;
      }
      .rule {
        color: #888;
        line-height: 44rpx;
      }
    }
  }
</style>
